<template id="Circle">
  <div :id="id" :style="chartStyle">
    <slot></slot>
  </div>
</template>

<script>
  import defaultImange from "../img/bgBlue.png";
/**
 *@author 张馨月
 */
    export default {
      name: 'ATCircle',
      data () {
        return {
          myChart:null,
        }
      },
      mounted(){
        this.$nextTick(function(){
          this.draw();
        })
      },
      watch:{
        seriesData(){
          this.draw()
        },
        legendData(){
          this.draw()
        },
      },
      props:{
/**
 *@type {string} id 容纳echarts的div的id随机生成
 */ 
        id:{
          type: String,
          default: function () { 
            let temp = [];
            for (let i = 0; i < 6; i++) {
              let randomChar = String.fromCharCode(65 + Math.floor(Math.random() * 19) + i);
              temp.push(randomChar);

            }
            return temp.reduce((pre, next) => pre + next);
          }
        },
/**
 *@type {Array} seriesData 环图中的数据填充，形式{value:number, name:'string'}，可多组
 */ 
        seriesData:{
          type:Array,
          // require:true,
          default:function(){
            return []
          }
        },
/**
 *@type {Array} legendData 环图中的图例，为seriesData中name的集合
 */ 
        legendData:{
          type:Array,
          // require:true,
          default:function(){
            return []
          }
        },
/**
 *@type {String} chartStyle echarts的外层容器样式
 */
        chartStyle:{
          type:String,
          // required:true,
          default:"width:100%;height:100%;"
        },
        center:{
          type:Array,
          // require:true,
          default:function(){
            return ['30%','50%']
          }
        },
        fileName: {
          type:String,
          default:"echarts"
        },
        toolboxRight:{
          type:String,
          default:'0px'
        },
        toolboxTop:{
          type:String,
          default:'55px'
        },
        legendX:{
          type:String,
          default:'60%'
        },
        legendY:{
          type:String,
          default:'30%'
        },
        itemColor:{
          type:Array,
          default:function(){
            return ['#5f9dff','#6be1c1','#ffd86e','#ee5959','#7d92d4']
          }
        },
        showDownloadIcon:{
          type:Boolean,
          default:true
        }, 
        tooltippadding:{
          default:function(){
            return [17,20 ,17 ,22]
          }
        },
        formatter:{
          default:"{b}: {c} ({d}%)"
        } 
      },
      methods: {
        draw(){
            // let myChart = this.$echarts.init(document.getElementById(this.id))
            if (document.getElementById(this.id)) {
              this.myChart = this.myChart==null ? this.$echarts.init(document.getElementById(this.id)):this.myChart
              this.myChart.setOption({
                    color: this.itemColor,
  /**
  *@type {object} tooltip 当hover时的提示框及文字。
  */
                    tooltip: {
                        padding:this.tooltippadding,
                        trigger: 'item',
                        formatter: this.formatter,
                        backgroundColor:'rgba(50, 50, 50, 0.7)',
                        borderColor:'rgb(51, 51, 51)',
                        borderWidth:0,
                        textStyle:{
                            color:"#fff",
                            fontSize:12,
                            fontFamily: '宋体'
                        }
                    },
                    toolbox:{
                        right:this.toolboxRight,
                        top:this.toolboxTop,
                        show: this.showDownloadIcon,
                        orient: 'horizontal',
                        itemGap: 10,
                        showTitle: true,
                        itemSize:84,
                        // iconStyle: {
                        //   normal:{
                        //     borderColor: '#5c6781'
                        //   },
                        //   emphasis:{
                        //     borderColor: '#4990ff'
                        //   }
                        // },
                        feature: {
                            saveAsImage:{
                                name: this.fileName,
                                show:true,
                                title: ' ',
                                icon: 'image://'+defaultImange,
                            }    
                        }                    
                    },
                    legend: {
                        orient: 'vertical',
                        x: this.legendX,
                        y:this.legendY,
                        data:this.legendData,
                        icon : 'circle',
                        itemWidth:9,
                        textStyle: {
                          fontFamily: '宋体'
                        }
                    },
                    series: [{
                            name:'系统名称',
                            type:'pie',
                            radius: ['55%', '70%'],
                            center:this.center,
  /**
  *@type {Boolean} hoverAnimation 环图中是否开启 hover 在扇区上的放大动画效果。
  */
                            hoverAnimation: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center',
                                    textStyle: {
                                      fontFamily: '宋体'
                                    }
                                },
  /**
  *@type {object} emphasis 环图中的环内文字
  */
                                emphasis: {
                                    formatter:'000',
                                    show: false,
                                    textStyle: {
                                        fontSize: '18',
                                        color:'gray',
                                        fontWeight:'bold',
                                        fontFamily: '宋体'
                                    }
                                }
                            },
  /**
  *@type {object} labelLine 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线。
  */
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:this.seriesData
                    }]
              });
              // this.myChart.resize();
              var _this=this
              window.addEventListener("resize",function(){
                  _this.myChart.resize();
              })
            }
        },
      }
    }
</script>

